import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../style/less/main.css';
import axios from '../api/index';
//import echarts from 'echarts';
import {Table,mountNode } from 'antd';
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
// 使用样式
import 'echarts/theme/macarons'

class Echarts extends React.Component{
    constructor(){
        super();
        
        
    }
    componentWillMount(){
        // axios.api.mockData3().then((res)=>{
        //     let mock = res.array;
        //     this.setState({
        //         data:mock
        //     })
        // });
       
    }
    componentDidMount(){
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};
      var option = null;
      app.title = '坐标轴刻度与标签对齐';
      
      option = {
          color: ['#3398DB'],
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
              {
                  name:'直接访问',
                  type:'bar',
                  barWidth: '60%',
                  data:[10, 52, 200, 334, 390, 330, 220]
              }
          ]
      };
      
      if (option && typeof option === "object") {
          myChart.setOption(option, true);
      }
    }
    render(){
        return(<Echarts id='container' />
           )
    }
}

export default Echarts;